<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
  <style>
    body{background:url(img/background.jpg );
      display: flex;
      /*弹性盒子*/
      margin-top: 300px;
      margin-left: 1000px;
      background-size:100% ;
    }
  </style>
  <script src="js/jquery.min.js"></script>
  <script>
    var time=60;
    var mytimeout = null;
    function goLoginPage(){
      location.href="login.html"}

    function findPassword(btn){
      var username=$("#username").val();
      if (username==null||username.trim()==" "){
        //用户名为空
        alert("用户名不能为空");
        return;
      }
      //禁用按钮
      btnDisTime(btn);
      //请求ajax 请求后端发送短信
      $.ajax({
        type:"post",
        url:"http://localhost:8080/user/sendEmailCode",
        data:{
          username:username
        },
        success:function (data){
          if (data==1){
            alert("邮件发送成功");
          }
          else if(data == -1){
            alert("账号不存在！");
            //按钮恢复
            $(btn).removeAttr("disabled");
            $(btn).html("发送邮件");
            //关闭定时器
            clearTimeout(mytimeout);

          } else if(data == -2){
            // alert("邮件发送失败！");
          }
        }
      });
    }
    function btnDisTime(btn){
      $(btn).attr("disabled","disabled");
      $(btn).html("邮件已发送...("+time+")");
      setTimeout(function () {
      //时间扣减
        time--;
        if(time > 0){
          btnDisTime(btn);
        } else {
          //结束递归
          //按钮恢复
          $(btn).removeAttr("disabled");
          $(btn).html("发送邮件");
          time = 60;
        }
      },1000);
    }
    function updataPassword(){
      var username=$("#username").val();
      var newpassword=$("#newpassword").val();
      var code=$("#code").val();
      $.ajax({
        type:"post",
        url:"http://localhost:8080/user/updatePassword",
        data:{
          username:username,
           newpassword:newpassword,
           code:code
      },
        success:function (data){
          if(data=1){
            alert("密码重置成功")
          }
          else if(data==-1){
            alert("无效或已过期验证码")
          }
          else if(data==-2){
            alert("验证码错误")
          }
        }
      })
    }
  </script>
</head>
<body>
<div >
  <h1>找回密码</h1>
  <div>
    输入找回的账号:<br><input  id=username type="text" placeholder="输入账号">
    <button onclick="findPassword(this)">发送验证码</button>
  </div>
  <div>
    输入新的密码:<br><input  id=newpassword type="text" placeholder="输入新的密码">
  </div>
  <div>
    输入验证码:<br><input  id=code type="text" placeholder="输出验证码">
  </div>
  <div>
    <button onclick="updataPassword()">重置密码</button>
    <br>
    <button onclick="goLoginPage()">已有密码</button>
  </div>
</div>
</body>
</html>